<template>
  <div class="app-container">
    <div class="change-title">
      <el-button
        v-for="(item, index) in changTitleBtn"
        :key="item.id"
        type="primary"
        :class="activeIndex === index ? 'active' : ''"
        @click="changeTitle(index)"
      >
        {{ item.name }}
      </el-button>
    </div>
    <transition name="fade-transform" mode="out-in">
      <div v-if="activeIndex === 0" key="0">
        <video-list></video-list>
      </div>
      <div v-else-if="activeIndex === 1" key="1">
        <red-book></red-book>
      </div>
      <div v-else key="2">
        <article-list wzType='post17'></article-list>
      </div>
    </transition>
  </div>
</template>
<script>
import videoList from './redVideo/index.vue'
import redBook from './redBook/index.vue'
export default {
  name: '',
  components: {
    videoList,
    redBook
  },
  data () {
    return {
      searchParams: {
        name: null
      },
      changTitleBtn: [
        {
          id: 1,
          name: '红色视频'
        },
        {
          id: 2,
          name: '听红书'
        },
        {
          id: 3,
          name: '红色故事'
        }
      ],
      activeIndex: 0
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  methods: {
    changeTitle (index) {
      this.activeIndex = index
    }
  }
}
</script>
<style lang="scss" scoped>
.change-title {
  margin-bottom: 20px;
}
.active {
  background-color: #C64C39;
  border-color: #C64C39;
}
</style>
